<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>zTab</title>
	<link rel="stylesheet" href="/static/layui/layui-2.4.3/css/layui.css" />
	<link rel="stylesheet" href="/static/css/index.css" />
</head>

<body class="layui-layout-body">
	<div id="app" class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item">
					<a href="">主页</a>
				</li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					<a href="javascript:;">
						<img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
					</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">基本资料</a>
						</dd>
						<dd>
							<a href="">安全设置</a>
						</dd>
						<dd>
							<a href="/logout">退出登录</a>
						</dd>
					</dl>
				</li>
			</ul>
		</div>

		<div class="layui-side layui-side-menu">
			<div class="layui-side-scroll">
				<div class="layui-logo">zTab</div>
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li v-for="menu in menus" class="layui-nav-item layui-nav-itemed">
						<a class="" href="javascript:void(0);" v-text="menu.name"></a>
						<dl v-if="menu.type === 0" v-for="child in menu.childs" class="layui-nav-child">
							<dd>
								<a :lay-href="child.url" v-text="child.name" href="javascript:;"></a>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<div id="tabs"></div>
		<div id="tabs-body" class="layui-body">
		</div>

	</div>

	<script src="/static/js/jquery/jquery-1.11.3.min.js"></script>
	<script src="/static/layui/layui-2.4.3/layui.js"></script>
	<script src="/static/js/vue/vue_2.5.17.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				menus: []
			},
			methods: {
				init: function(){
					$.getJSON("/static/json/menu.json",function (result){
						vm.menus = result;
						// console.log("menu已加载");
					});
				},
				openTab: function (menu) {
					tab.addTab({
						id: menu.mid,
						title: menu.name,
						content: menu.url
					});
				}
			},
			mounted: function(){
				console.log("Vue mounted");
				this.init();
			}
		});
		
		layui.use('tab', function () {
			var tab = layui.tab;
			tab.init('#tabs', {
				index: {
					url: 'content_index.html'
				}
			});
			for(var i=0;i<50;i++){
				tab.addTab({
					id: i,
					title: 'Tab'+i,
					type: 'html',
					content: '<h1>aa'+ i +'</h1>',
					url: '/manage/user'+ i +'.html'
				});
			}
			// console.log("Tab初始化完成");
		});
		
		$(document).ready(function (){
			console.log("ready");
		});
		
	</script>
</body>

</html>
